<template>
    <div class="caculate_wrapper">
        <div class="caculate">
            <div class="bowl">
                <transition
                    name="bounce"
                    enter-active-class="bounceInDown"
                    leave-active-class="bounceOutRight"
                    >
                <img src="http://file.rzkeji.com/web/f6_activity/caculate/bowl.png" alt="" v-show="showBowl" ref="bowl">
                </transition>
            </div>
            <div class="man">
                <transition
                    name="bounce"
                    enter-active-class="bounceInLeft"
                    leave-active-class="bounceOutRight"
                    >
                    <img src="http://file.rzkeji.com/web/f6_activity/caculate/caculate_man.png" alt="" v-show="showMan" ref="man">
                </transition>
            </div>
            <div class="tit">
                <div>你今天吃了什么?</div>
                <div>点击计算摄入多少膳食纤维?</div>
            </div>
            <transition
                    name="slideDown"

                    
                    >
            <div class="type_select" v-if="showMan">
                <div class="select" @click="show('main_food')">
                    <div class="select_wrapper">
                        <div>主食</div>
                        <img src="../../../static/img/trangle.png" alt="">
                    </div>
                </div>
                <div class="select" @click="show('vegetable')">
                    <div class="select_wrapper">
                        <div>蔬菜</div>
                        <img src="../../../static/img/trangle.png" alt="">
                    </div>
                </div>
                <div class="select" @click="show('fruit')">
                    <div class="select_wrapper">
                        <div>水果</div>
                        <img src="../../../static/img/trangle.png" alt="">
                    </div>
                </div>
            </div>
            </transition>
            <div class="select_list">
                <div class="select_item main_food">
                    <div v-for="(item,index) of main_food_select_show" :key="index"><span class="select_item_name">{{item.name}}</span> <span v-show="item.num>1">x{{item.num}}</span></div>
                </div>
                <div class="select_item vegetable">
                    <div v-for="(item,index) of vegetable_select_show" :key="index"><span class="select_item_name">{{item.name}}</span> <span v-show="item.num>1">x{{item.num}}</span></div>
                </div>
                <div class="select_item fruit">
                    <div v-for="(item,index) of fruit_select_show" :key="index"><span class="select_item_name">{{item.name}}</span> <span v-show="item.num>1">x{{item.num}}</span></div>
                </div>
            </div>
            <div class="btn">
            <!-- <router-link :to="{name:'analysis'}" tag="div">点击计算</router-link> -->
            <div @click="caculate">
                <div>点击</div>
                <div>计算</div>
            </div>
        </div>
        <div class="picker">
            <!-- <picker :show="main_food" @confirm='confirmM' @cancel="cancelM" :columns="mainFoodItem" ref="main_food"></picker>
            <picker :show="main_food" @confirm='confirmV' @cancel="cancelV" :columns="vegetableItem" ref="vegetable"></picker>
            <picker :show="main_food" @confirm='confirmF' @cancel="cancelF" :columns="fruitItem" ref="fruit"></picker> -->
            <pop-checkbox  @confirm='confirmM' @cancel="cancelM" :columns="mainFoodItem" ref="main_food"></pop-checkbox>
            <pop-checkbox  @confirm='confirmV' @cancel="cancelV" :columns="vegetableItem" ref="vegetable"></pop-checkbox>
            <pop-checkbox :show="main_food" @confirm='confirmF' @cancel="cancelF" :columns="fruitItem" ref="fruit"></pop-checkbox> 
        </div>
        </div>
    </div>
</template>
<script>
import picker from '@/components/picker';
import {mainFood,vegetable,fruit} from '../../assets/food';
import popCheckbox from '@/components/popCheckbox'
import { setTimeout } from 'timers';
export default {
    name:'caculate',
     data() {
        return {
            mainFood,
            vegetable,
            fruit,
            main_food:false,
            main_food_select:[],//选中的主食
            vegetable_select:[],//选中的蔬菜
            fruit_select:[],//选中的水果
            main_food_goals:0,
            vegetable_goals:0,
            fruit_goals:0,
            goals:'',
            goalsInit:0,//来自打卡页面的得分
            fromCheckIn:'',
            arrInit:[],
            main_food_select_show:[],//x1,x2这样展示
            vegetable_select_show:[],
            fruit_select_show:[],
            showBowl:false,
            showMan:false

        };
    },
    components:{
        picker,popCheckbox
    },
    watch: {
        main_food_select_show:{
            deep:true,
            handler(arr){
                if(arr.length!=0){
                this.main_food_goals=0
                arr.forEach((val)=>{
                    this.mainFood.forEach((val1)=>{
                        if(Object.keys(val1)[0]==val.name){
                            this.main_food_goals+=Number(Object.values(val1)[0])*val.num
                        }
                    })
                })
                }
            }
            
        },
        vegetable_select_show:{
            deep:true,
            handler(arr){
                this.vegetable_goals=0
                arr.forEach((val)=>{
                    this.vegetable.forEach((val1)=>{
                        if(Object.keys(val1)[0]==val.name){
                            this.vegetable_goals+=Number(Object.values(val1)[0])*val.num
                        }
                    })
                })
            }
        },
        fruit_select_show:{
            deep:true,
            handler(arr){
                this.fruit_goals=0
                arr.forEach((val)=>{
                    this.fruit.forEach((val1)=>{
                        if(Object.keys(val1)[0]==val.name){
                            this.fruit_goals+=Number(Object.values(val1)[0])*val.num
                        }
                    })
                })
            }
        }
    },
    computed: {
        mainFoodItem(){
            let arr=[]
            this.mainFood.forEach((val)=>{
                arr.push(Object.keys(val)[0])
            })
            return arr
        },
        vegetableItem(){
            let arr=[]
            this.vegetable.forEach((val)=>{
                arr.push(Object.keys(val)[0])
            })
            return arr
        },
        fruitItem(){
            let arr=[]
            this.fruit.forEach((val)=>{
                arr.push(Object.keys(val)[0])
            })
            return arr
        }
    },
    methods: {
        show(type){
            this.$refs[type].show=true
        },
        confirmM(arr){
            const arr1=this.main_food_select
            const arrAll=[...arr1,...arr];
            this.main_food_select=arrAll;
            this.toSelectArr(arrAll,this.main_food_select_show)
        },
        cancelM(arr){
            this.splitItem(arr,this.main_food_select_show)
        },
        confirmV(arr){
            const arr1=this.vegetable_select;
            const arrAll=[...arr1,...arr]
            this.vegetable_select=arrAll
            this.toSelectArr(arrAll,this.vegetable_select_show)
        },
        cancelV(arr){
            this.splitItem(arr,this.vegetable_select_show)
        },
        confirmF(arr){
          const arr1=  this.fruit_select;
          const arrAll=[...arr1,...arr];
          this.fruit_select=arrAll;
          this.toSelectArr(arrAll,this.fruit_select_show)
        },
        cancelF(arr){
            this.splitItem(arr,this.fruit_select_show)
        },
        // splitItem(arr,showArr){//移除选中项
        //    var index1=''
        //     arr.forEach((item,index)=>{
        //         if(item==val){
        //             index1=index
        //         }
        //     })
        //    arr.splice(index1,1)
        // },
            splitItem(arr,showArr){//移除选中项
           arr.forEach((item)=>{
                showArr.forEach((item1,index1,arr1)=>{
                    if(item1.name==item){
                        const num=arr1[index1].num-1
                        if(num!=0){
                            arr1[index1].num=num
                        } else{
                            showArr.splice(index1,1)
                        }
                    }
                })
            })
        },
        getNum(val,arr){//获取数量
           const processArr = arr.filter(function(value) {
                return value == val;
            })
            return processArr.length;
        },
        toSelectArr(arrAll,showArr){//生成展示用的数组
            arrAll.forEach((val)=>{
               const num= this.getNum(val,arrAll);
               const obj={name:val,num}
              if(showArr.length!=0){
                  const flag= showArr.find((item,index,arr)=>{
                      if(item.name==obj.name){//有重复性，更新值
                          arr[index].num=obj.num
                      }
                        return item.name==obj.name
                    })
                    if(!flag){//一项都没有
                        showArr.push(obj)
                    }
              }else{
                  showArr.push(obj)
              }
            })
        },
        caculate(){

            this.goals=this.main_food_goals+this.vegetable_goals+this.fruit_goals+this.goalsInit
            // this.$bus.data.goals=this.goals;
            if(this.fromCheckIn){//去到分享页
                this.$router.replace({name:'share',params:{'goals':this.goals}})
            }else{
                this.$router.replace({name:'analysis',params:{'goals':this.goals}})
            }         
        }
    },
    mounted() {
        let _this=this
        this.$refs.man.onload=function(){
            setTimeout(()=>{
                _this.showMan=true
            },1500)
        }
        this.$refs.bowl.onload=function(){
            setTimeout(()=>{
                _this.showBowl=true
            },1000)
        }
        this.fromCheckIn=this.$route.params.from
        if(this.$route.params.goals){//来自打卡页面的得分
            if(this.$route.params.goals){
                this.goalsInit=this.$route.params.goals
                console.log(this.goalsInit)
            }
        }
    },
}
</script>
<style lang="scss" scoped>
@import '../../common/css/index.scss';
    .flex{
        display:flex;
        justify-content: space-around;
        align-items: center;
    }
    .caculate_wrapper{
        background-image:url('http://file.rzkeji.com/web/f6_activity/caculate/caculate_bg.jpg');
        width:100%;
        height:100%;
        background-size:100%;
    }
    .bowl,.man{
        width: 100%;
        position: absolute;;
        img{
            width: 100%;
        }
    }
    .bowl{
        bottom: 0;
        z-index: 2;
    }
    .man{
        bottom: 0;
    }
    .caculate{
        width:100%;
        height: 100%;
        // background-image:url('../../../static/img/caculate/bowl.png') ;
        // background-image:url('../../../static/img/caculate/bowl.png'),url('../../../static/img/caculate/caculate_man.png') ;
        background-size:100%;
        background-repeat: no-repeat;
        // background-position:0px 820px;
        // background-position:0px 820px, 0 220px;
        .tit{
            padding-top:20px;
            text-align: center;
            font-size: 40px;
            color:#fff;
            &>div:nth-child(1){
                font-size:50px; 
                margin-bottom: 10px;
            }
        }
        .type_select{//3种分类
            @extend .flex;
            margin-top:40px;
            position: relative;
            z-index: 33;
            .select_wrapper{
                background:#fff;
                border-radius:20px;
                width:180px;
                height: 80px;
                display:flex;
                justify-content: space-around;
                align-items: center;
                font-size: 40px;
                img{
                    width:30px;
                    height: 30px;
                }
            }
        }
        .select_list{
            @extend .flex;
            align-items: flex-start;
            position: relative;
            z-index: 32;
            
            .select_item{
                font-size: 30px;
                margin-top:-10px;
                background:rgba(184, 168, 142,0.6);
                width: 180px;
                color:#fff;
                &>div{
                    margin-top:30px;
                    font-size: 30px;
                }
            }
            .select_item_name{
                width:140px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow:ellipsis

            }
        }
        .btn{
            z-index: 3;
            &>div{
               background:url('../../../static/img/caculate/caculate_btn.png');
                background-size:100% 100%;
                display: flex;
                justify-content: center;
                align-content: center;
                flex-wrap: wrap;
                div{
                    width: 100%;
                }
           }
        }
    }
</style>
